<template>
  <h1>二次封装 antd 选择器</h1>
  <div class="box">
    <!-- 无插槽 -->
    <!-- <d-select 
      v-model:value="value"
      v-model:label="lobel"
      :options="options"
      @change="handleChange"
      mode="multiple"
      style="width: 120px"
    ></d-select> -->

    <!-- 带插槽 -->
    <d-select 
      v-model:value="value"
      v-model:name="lobel"
      @change="handleChange"
      style="width: 120px"
    >
      <a-select-option v-for="item in options" :key="item.value" :value="item.value" :name="item.label">{{item.label}}</a-select-option>
    </d-select>
  </div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, toRaw } from "vue";
import DSelect from "./components/DSelect.vue";
const staticData = {

};
export default defineComponent({
  name: "App",
  components: {
    DSelect,
  },
  setup() {
    const data = reactive({
      value: null,
      lobel:null,
      options: [
        {
          value: "1",
          label: "Jack",
        },
        {
          value: "2",
          label: "Lucy",
        },
        {
          value: "3",
          label: "Disabled",
          disabled: true,
        },
        {
          value: "4",
          label: "Yiminghe",
        },
      ],
    });
    const mothods = {
      handleChange(value,options) {
        console.log("父级组件",value,options);
      }
    };
    return {
      ...toRefs(data),
      ...staticData,
      ...mothods,
    };
  },
});
</script>
<style scoped>
.box{
  width: 240px;
  height: 240px;
  padding: 24px;
}
</style>